<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 模拟车辆健康数据
const vehicleHealthData = ref([
  {
    id: 'V001',
    name: '主战坦克-A1',
    healthScore: 92,
    keyComponents: {
      engine: { status: '良好', remainingHours: 320, totalHours: 500 },
      transmission: { status: '良好', remainingHours: 280, totalHours: 300 },
      suspension: { status: '注意', remainingHours: 180, totalHours: 200 },
      brake: { status: '良好', remainingHours: 420, totalHours: 500 }
    },
    lastCheck: '2025-09-10'
  },
  {
    id: 'V002',
    name: '装甲运兵车-B2',
    healthScore: 78,
    keyComponents: {
      engine: { status: '注意', remainingHours: 150, totalHours: 300 },
      transmission: { status: '良好', remainingHours: 280, totalHours: 300 },
      suspension: { status: '警告', remainingHours: 90, totalHours: 150 },
      brake: { status: '注意', remainingHours: 120, totalHours: 200 }
    },
    lastCheck: '2025-09-09'
  },
  {
    id: 'V003',
    name: '自行火炮-C3',
    healthScore: 85,
    keyComponents: {
      engine: { status: '良好', remainingHours: 380, totalHours: 500 },
      transmission: { status: '良好', remainingHours: 250, totalHours: 300 },
      suspension: { status: '良好', remainingHours: 180, totalHours: 200 },
      brake: { status: '注意', remainingHours: 110, totalHours: 200 }
    },
    lastCheck: '2025-09-08'
  },
  {
    id: 'V004',
    name: '侦察车-D4',
    healthScore: 95,
    keyComponents: {
      engine: { status: '良好', remainingHours: 420, totalHours: 500 },
      transmission: { status: '良好', remainingHours: 290, totalHours: 300 },
      suspension: { status: '良好', remainingHours: 190, totalHours: 200 },
      brake: { status: '良好', remainingHours: 180, totalHours: 200 }
    },
    lastCheck: '2025-09-11'
  },
  {
    id: 'V005',
    name: '指挥车-E5',
    healthScore: 72,
    keyComponents: {
      engine: { status: '警告', remainingHours: 80, totalHours: 200 },
      transmission: { status: '注意', remainingHours: 120, totalHours: 200 },
      suspension: { status: '注意', remainingHours: 110, totalHours: 150 },
      brake: { status: '警告', remainingHours: 60, totalHours: 100 }
    },
    lastCheck: '2025-09-07'
  }
])

// 统计数据
const stats = ref({
  totalVehicles: 0,
  healthyVehicles: 0,
  warningVehicles: 0,
  dangerVehicles: 0
})

// 计算统计数据
const calculateStats = () => {
  stats.value.totalVehicles = vehicleHealthData.value.length
  stats.value.healthyVehicles = vehicleHealthData.value.filter(v => v.healthScore >= 85).length
  stats.value.warningVehicles = vehicleHealthData.value.filter(v => v.healthScore >= 70 && v.healthScore < 85).length
  stats.value.dangerVehicles = vehicleHealthData.value.filter(v => v.healthScore < 70).length
}

// 获取状态类型（用于标签颜色）
const getStatusType = (status) => {
  const statusTypes = {
    '良好': 'success',
    '注意': 'warning',
    '警告': 'danger'
  }
  return statusTypes[status] || 'info'
}

// 获取健康评分颜色
const getHealthScoreColor = (score) => {
  if (score >= 85) return '#67C23A'
  if (score >= 70) return '#E6A23C'
  return '#F56C6C'
}

// 查看详情
const viewDetails = (vehicle) => {
  ElMessage.info(`查看车辆 ${vehicle.name} 的详细信息`)
}

// 初始化
onMounted(() => {
  calculateStats()
})
</script>

<template>
  <div class="health-list-container">
    <div class="page-header">
      <h1><i class="el-icon-monitor"></i> 车辆健康状态列表</h1>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-container">
      <div class="compact-stats">
        <div class="stat-card online">
          <div class="card-header">
            <div class="card-icon">
              <i class="el-icon-truck"></i>
            </div>
            <div class="card-title">总车辆数</div>
          </div>
          <div class="stat-value">{{ stats.totalVehicles }}</div>
        </div>

        <div class="stat-card online">
          <div class="card-header">
            <div class="card-icon">
              <i class="el-icon-check"></i>
            </div>
            <div class="card-title">健康车辆</div>
          </div>
          <div class="stat-value">{{ stats.healthyVehicles }}</div>
        </div>

        <div class="stat-card warning">
          <div class="card-header">
            <div class="card-icon">
              <i class="el-icon-warning"></i>
            </div>
            <div class="card-title">注意车辆</div>
          </div>
          <div class="stat-value">{{ stats.warningVehicles }}</div>
        </div>

        <div class="stat-card danger">
          <div class="card-header">
            <div class="card-icon">
              <i class="el-icon-error"></i>
            </div>
            <div class="card-title">危险车辆</div>
          </div>
          <div class="stat-value">{{ stats.dangerVehicles }}</div>
        </div>
      </div>
    </div>

    <!-- 车辆健康列表 -->
    <div class="content-container">
      <div class="health-table">
        <el-table 
          :data="vehicleHealthData" 
          style="width: 100%" 
          stripe
          :header-cell-style="{ background: '#1a2a52', color: '#e4e8f0' }"
          :row-style="{ background: 'rgba(10, 26, 58, 0.3)', color: '#e4e8f0' }"
        >
          <el-table-column prop="id" label="车辆编号" width="120" sortable />
          <el-table-column prop="name" label="车辆名称" width="150" sortable />

          <el-table-column label="健康评分" width="150" sortable>
            <template #default="{ row }">
              <div class="score-container">
                <div 
                  class="score-bar" 
                  :style="{ 
                    width: '100%', 
                    height: '1.5vw',
                    backgroundColor: '#2a3a6a',
                    borderRadius: '0.4vw',
                    overflow: 'hidden'
                  }"
                >
                  <div 
                    class="score-fill"
                    :style="{ 
                      width: row.healthScore + '%', 
                      height: '100%',
                      backgroundColor: getHealthScoreColor(row.healthScore),
                      borderRadius: '0.4vw'
                    }"
                  ></div>
                </div>
                <div class="score-text">{{ row.healthScore }}分</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="关键部件状态" min-width="300">
            <template #default="{ row }">
              <div class="components-status">
                <div class="component-item">
                  <span class="label">发动机:</span>
                  <el-tag :type="getStatusType(row.keyComponents.engine.status)" size="small">
                    {{ row.keyComponents.engine.status }} ({{ row.keyComponents.engine.remainingHours }}/{{ row.keyComponents.engine.totalHours }}h)
                  </el-tag>
                </div>

                <div class="component-item">
                  <span class="label">变速箱:</span>
                  <el-tag :type="getStatusType(row.keyComponents.transmission.status)" size="small">
                    {{ row.keyComponents.transmission.status }} ({{ row.keyComponents.transmission.remainingHours }}/{{ row.keyComponents.transmission.totalHours }}h)
                  </el-tag>
                </div>

                <div class="component-item">
                  <span class="label">悬挂系统:</span>
                  <el-tag :type="getStatusType(row.keyComponents.suspension.status)" size="small">
                    {{ row.keyComponents.suspension.status }} ({{ row.keyComponents.suspension.remainingHours }}/{{ row.keyComponents.suspension.totalHours }}h)
                  </el-tag>
                </div>

                <div class="component-item">
                  <span class="label">制动系统:</span>
                  <el-tag :type="getStatusType(row.keyComponents.brake.status)" size="small">
                    {{ row.keyComponents.brake.status }} ({{ row.keyComponents.brake.remainingHours }}/{{ row.keyComponents.brake.totalHours }}h)
                  </el-tag>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="lastCheck" label="最后检查" width="120" sortable />

          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewDetails(row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.health-list-container {
  padding: 1vw;
  background: #1a2a52;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 2vw;
  padding: 1vw;
  background: #1a2a52;
  border-radius: 1vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1vw;
  box-shadow: 0 0.6vw 1.6vw rgba(0, 0, 0, 0.3);
  border: 0.1vw solid #2a3a6a;
}
.el-table__row {
  background: #1a2a52 !important;
}
.page-header h1 {
  font-size: 1.5vw;
  color: #e4e8f0;
  display: flex;
  align-items: center;
  gap: 1vw;
  margin: 0;
}

.stats-container {
  margin-bottom: 2vw;
}

/* 统计卡片 */
.compact-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15vw, 1fr));
  gap: 1.5vw;
}

.stat-card {
  background: linear-gradient(135deg, #1a2a52, #152245);
  border-radius: 1.2vw;
  padding: 1.5vw;
  box-shadow: 0 0.6vw 1.6vw rgba(0, 0, 0, 0.3);
  border: 0.1vw solid #2a3a6a;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 10vw;
}

.stat-card:hover {
  transform: translateY(-0.5vw);
  box-shadow: 0 0.8vw 2vw rgba(0, 0, 0, 0.4);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1vw;
}

.card-icon {
  width: 2.5vw;
  height: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 1.5vw;
  font-size: 1.2vw;
}

.online .card-icon {
  background: rgba(0, 210, 150, 0.15);
  color: #00d296;
}

.warning .card-icon {
  background: rgba(255, 180, 0, 0.15);
  color: #ffb400;
}

.danger .card-icon {
  background: rgba(255, 90, 90, 0.15);
  color: #ff5a5a;
}

.card-title {
  font-size: 1vw;
  font-weight: 500;
  color: #c0d0f0;
  margin-bottom: 0.5vw;
}

.stat-value {
  font-size: 1.5vw;
  font-weight: 600;
  margin-top: auto;
  color: #e4e8f0;
}

.content-container {
  background: #1a2a52;
  border-radius: 1.2vw;
  padding: 1vw;
  box-shadow: 0 0.6vw 1.6vw rgba(0, 0, 0, 0.3);
  border: 0.1vw solid #2a3a6a;
  overflow: hidden;
}

.health-table {
  background-color: #1a2a52;
  border-radius: 0.8vw;
  overflow: hidden;
}

.score-container {
  display: flex;
  align-items: center;
  position: relative;
  height: 1.5vw;
}

.score-text {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: bold;
  font-size: 1vw;
  color: #e4e8f0;
  text-shadow: 0 0 0.2vw rgba(0, 0, 0, 0.5);
}

.components-status {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
}

.component-item {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.component-item .label {
  font-size: 1vw;
  color: #a0b1d0;
  width: 6vw;
  flex-shrink: 0;
}

:deep(.el-table) {
  background-color: #1a2a52;
}

:deep(.el-table th) {
  background-color: #1a2a52;
  color: #e4e8f0;
}

:deep(.el-table tr) {
  background-color: #1a2a52;
}

:deep(.el-table__row:hover) {
  background-color: #2a3a6a !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  background-color: #2a3a6a !important;
}

:deep(.el-table td) {
  border-bottom: 0.1vw solid #2a3a6a;
}

:deep(.el-table--border) {
  border: 0.1vw solid #2a3a6a;
}

:deep(.el-table--border::after) {
  background-color: #2a3a6a;
}

:deep(.el-table--border th) {
  border-right: 0.1vw solid #2a3a6a;
}

:deep(.el-table .el-table__cell) {
  padding: 0.8vw 0;
}

:deep(.el-table .el-table__cell.is-center) {
  text-align: center;
}

:deep(.el-tag) {
  font-size: 0.9vw;
  padding: 0.2vw 0.6vw;
  border: none;
}

:deep(.el-button) {
  font-size: 1vw;
  padding: 0.5vw 1vw;
  border-radius: 0.5vw;
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 1.2vw;
  }
  
  .card-title {
    font-size: 1.2vw;
  }
  
  .stat-value {
    font-size: 1.3vw;
  }
  
  .component-item .label {
    font-size: 1.1vw;
    width: 8vw;
  }
  
  :deep(.el-tag) {
    font-size: 1vw;
  }
  
  :deep(.el-button) {
    font-size: 1.1vw;
    padding: 0.6vw 1.1vw;
  }
}
</style>